<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="list" v-if="lists.length > 0">
			<block v-for="(item,index) in lists " :key="index">
				<view class="list-item">
					<view class="title">{{item.product_name}}</view>
					<view class="time">陪诊时间：{{item.selected_date}}</view>
					<view class="cont">订单金额：￥{{item.pay_price}}</view>
				</view>
			</block>
		</view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-else>
		</u-empty>
		<u-loadmore v-if="lists.length > 0" :status="status" line dashed @loadmore="loadmore" />
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '公益陪诊记录',
					'color': true,
					'class': 'on'
				},
				lists: [],
				status: 'loadmore',
				limit: 10,
				page: 1,
				total_num: '',
			};
		},
		onLoad(option) {
			this.list(option.id);
		},
		onShow() {
			
		},
		onReachBottom() {
			this.loadmore()
		},

		methods: {
			async list(id) {
				const res = await this.$myRequest({
					url: '/api/manage/freeOrderLists',
					data: {
						page: this.page,
						limit: this.limit,
						openid: uni.getStorageSync('openid')
					}
				})
				this.lists = [...this.lists, ...res.data.data];
				this.total_num = res.data.total_num;
			},
			loadmore() {
				console.log(11111)
				if (this.total_num == this.lists.length) {
					this.status = 'nomore';
				} else {
					this.status = 'loading';
					this.page++;
					this.list();
				}
				setTimeout(() => {
					if (this.total_num == this.lists.length) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 30rpx;
	}

	.list-item {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
	}

	.list-item .title {
		font-size: 33rpx;
		font-weight: 700;
		color: #000;
		margin-bottom: 20rpx;
	}

	.list-item .cont {
		font-size: 26rpx;
		color: red;
		margin: 20rpx 0;
	}

	.list-item .time {
		font-size: 24rpx;
		color: #999999;
	}


</style>
